import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import axios from 'axios'
import { ListItem } from '../home'
import { useDispatch } from 'react-redux'
const App = () => {
	// 获取动态路由参数
	const params = useParams()
	const dispatch = useDispatch()
	const [item, setItem] = useState<ListItem>()
	useEffect(() => {
		axios.post('/api/detail', { id: params.id }).then(resp => {
			console.log(resp.data);
			setItem(resp.data.data)
		})
	}, [])

	const addCar = () => {
		// 加入购物车
		dispatch({ type: 'addCar', payload: item })
	}
	return (
		<>
			<img src={item && item.url} alt="" width="100%" />
			<h3>{item && item.title}</h3>
			<p>{item && item.desc}</p>
			<button onClick={ () => addCar() }>加入购物车</button>
		</>
	)
}


export default App